import React from 'react';
import { Popconfirm, Popover, Icon as AntIcon, Button } from 'antd';
import { RangeDnD } from '@/pages/Recruitment/containers/ScheduleV2';
import { Icon } from '@/pages/Recruitment/components';
import { px2Time, checkIntersection } from './utils';
import Triangle from './Triangle';

export default function DaySchedule({
    date,
    defaultRangeList = [],
    staticRangeList = [],
    rowsNum = 48,
    rowHeight = 22,
    minUnit = 22,
    tip,
    setTip,
    onChange,
    ...restProps
}) {
    const popoverContent = (
        <div
            onClick={e => {
                e.stopPropagation();
            }}
            onMouseDown={e => {
                e.nativeEvent.stopImmediatePropagation();
            }}
            style={{ width: 210 }}
        >
            <div style={{ fontSize: 14, color: 'rgba(0,0,0,.65)' }}>
                <AntIcon type="info-circle" theme="filled" style={{ color: '#FFA22D', marginRight: 8 }} />
                拖动上下边框可直接修改时间
            </div>
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'row',
                    height: '40px',
                    backgroundColor: 'rgba(68,198,157,0.10)',
                    marginTop: '16px',
                    borderRadius: '4px 2px 2px 4px'
                }}
            >
                <span
                    style={{
                        display: 'block',
                        width: '3px',
                        height: '100%',
                        background: '#44C69D',
                        borderRadius: '0 4px 4px 0',
                        transform: 'scaleX(-1)'
                    }}
                ></span>
                <div
                    style={{
                        position: 'relative',
                        margin: '20px 0 32px',
                        display: 'flex',
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        paddingLeft: 8,
                        paddingRight: 8
                        // backgroundColor: '#F0F7FF',
                        // borderRadius: 2,
                        // border: '1px solid #5590F6'
                    }}
                >
                    开始时间-结束时间
                    <Icon style={{ fontSize: 16 }} type="listfunction_delete_icon_default" />
                    <div style={{ position: 'absolute', left: '50%', bottom: -34, transform: 'translateX(-50%)' }}>
                        <Triangle />
                    </div>
                </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '34px' }}>
                <Button type="primary" size="small" onClick={() => setTip({ ...tip, show: false })}>
                    我知道了
                </Button>
            </div>
        </div>
    );

    const props = {
        // height: 500,
        rowsNum,
        rowHeight,
        minUnit,
        defaultRangeList,
        staticRangeList,
        renderExpandUp() {
            const style = {
                position: 'absolute',
                width: '100%',
                height: 6,
                top: '-3px',
                cursor: 'ns-resize'
            };
            return <div style={style}></div>;
        },
        renderExpandDown() {
            const style = {
                position: 'absolute',
                width: '100%',
                height: 6,
                bottom: '-3px',
                cursor: 'ns-resize'
            };
            return <div style={style}></div>;
        },
        customRemove: true,
        renderRemove(cb) {
            const style = {
                position: 'absolute',
                top: '50%',
                right: 8,
                transform: 'translateY(-50%)',
                cursor: 'pointer'
            };
            return (
                <div style={style}>
                    <Popconfirm
                        title="确定删除该时段?"
                        onConfirm={() => {
                            if (cb) cb();
                        }}
                        overlayStyle={{ width: 200 }}
                        getPopupContainer={trigger =>
                            trigger.parentElement?.parentElement?.parentElement?.parentElement || document.body
                        }
                    >
                        <Icon
                            title="删除"
                            style={{ fontSize: 16 }}
                            type="listfunction_delete_icon_default"
                            onClick={() => {}}
                            tooltipProps={{
                                overlayStyle: { minWidth: 46 },
                                getPopupContainer: trigger =>
                                    trigger.parentElement?.parentElement?.parentElement?.parentElement || document.body
                            }}
                        />
                    </Popconfirm>
                </div>
            );
        },
        // 自定义拖动项样式
        renderDragItem(item) {
            // 检查冲突
            const style = {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'flex-start',
                height: '100%',
                paddingLeft: 8,
                paddingRight: 24,
                overflow: 'hidden'

                // backgroundColor: 'rgba(68,198,157,0.10)',
                // borderRadius: '4px 2px 2px 4px'
                // border: '1px solid #5590F6'
            };
            const totalStyle = {
                display: 'flex',
                justifyContent: 'row',
                cursor: 'move',
                height: '100%',
                backgroundColor: 'rgba(68,198,157,0.10)',
                borderRadius: '4px 2px 2px 4px'
            };
            const spanStyle = {
                display: 'block',
                width: '3px',
                height: '100%',
                background: '#44C69D',
                borderRadius: '0 4px 4px 0',
                transform: 'scaleX(-1)'
            };
            let impact = '';
            if (staticRangeList.some(it => checkIntersection(it.range, item.range))) {
                totalStyle.backgroundColor = 'rgba(245,86,86,0.1)';
                // style.border = '1px solid #FFA22D';
                // style.color = '#F55656';
                spanStyle.backgroundColor = '#F55656';
                style.fontWeight = 500;
                impact = '行程有冲突';
            }
            const { range = [] } = item;
            const colHeight = range[1] - range[0];
            const title = range.map(it => px2Time(it, minUnit)).join('-');
            const content = (
                <div style={totalStyle}>
                    <span style={spanStyle}></span>
                    <div style={style} title={impact && colHeight <= 36 ? `${title}(行程冲突)` : ''}>
                        {colHeight >= 22 && <>{title}</>}
                        {impact && colHeight > 36 && <div>{impact}</div>}
                    </div>
                </div>
            );
            if (item?.first) {
                return (
                    <Popover
                        content={popoverContent}
                        visible={tip?.show}
                        onVisibleChange={() => setTip({ ...tip, show: false })}
                        trigger="click"
                        arrowPointAtCenter={false}
                        getPopupContainer={trigger => trigger.parentElement}
                    >
                        {content}
                    </Popover>
                );
            }
            return content;
        },
        // 自定义对比项样式
        renderStaticItem(item) {
            const { range = [] } = item;
            const colHeight = range[1] - range[0];
            return (
                <div
                    style={{
                        display: 'flex',
                        justifyContent: 'row',

                        height: '100%',
                        backgroundColor: '#F6F7F8',
                        borderRadius: '4px 2px 2px 4px'
                    }}
                >
                    <span
                        style={{
                            width: 3,
                            height: '100%',
                            opacity: '0.7',
                            transform: 'scaleX(-1)',
                            background: '#A0ACCC',
                            borderRadius: '0 100px 100px 100px 0'
                        }}
                    ></span>

                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'center',
                            overflow: 'hidden',
                            height: '100%',
                            textAlign: 'left',
                            marginLeft: '12px',
                            fontSize: 12,
                            color: '#49536C',
                            fontWeight: 500
                        }}
                        title={colHeight <= 36 ? '面试官已有行程(不推荐)' : ''}
                    >
                        <div>{colHeight >= 22 && <>{item.title || '面试官已有行程'}</>}</div>
                        {colHeight > 36 && (
                            <div style={{ fontSize: 10, color: '#BCC1CD', fontWeight: 400, paddingLeft: 10 }}>
                                不推荐
                            </div>
                        )}
                    </div>
                </div>
            );
        },
        onRangeChange(nextRangeList) {
            // setRangeList(nextRangeList);
            if (onChange) {
                onChange({
                    [date]: nextRangeList
                });
            }
        },
        // 可附加的数据
        onRangeAdd(item) {
            if (tip?.first) {
                setTip({ ...tip, first: false });
                return { ...item, first: true };
            }
            return item;
        },
        ...restProps
    };
    return <RangeDnD {...props} />;
}
